<template>
	<div class="banner">
		<div class="cw">
			<div class="banner-top">
				<ul class="banner-top-list">
					<li>全部产品分类</li>
					<li>首页内容</li>
					<li>推荐产品</li>
					<li>热销产品</li>
				</ul>
			</div>
			<div class="banner-content">
				<div class="banner-left">
					<ul class="banner-nav">
						<li>
							<div class="banner-title">
								<a href="">医用耗材</a>
								<i class="fa fa-chevron-right"></i>
							</div>
							<div class="banner-detail">
								1111
							</div>
						</li>
						<li>
							<div class="banner-title">
								<a href="">非医用耗材</a>
								<i class="fa fa-chevron-right"></i>
							</div>
							<div class="banner-detail">
								222
							</div>
						</li>
						<li>
							<div class="banner-title">
								<a href="">家居/电器</a>
								<i class="fa fa-chevron-right"></i>
							</div>
							<div class="banner-detail">
								333
							</div>
						</li>
						<li>
							<div class="banner-title">
								<a href="">办公用品</a>
								<i class="fa fa-chevron-right"></i>
							</div>
							<div class="banner-detail">
								4444
							</div>
						</li>
					</ul>
				</div>
				<div class="banner-right">
					<ul class="banner-show">
						<li class="banner-op">
							<a href="javascript:;"><img src="../img/banner-1.png" alt="" /></a>
						</li>
						<li>
							<a href="javascript:;"><img src="../img/banner-2.png" alt="" /></a>
						</li>
						<li>
							<a href="javascript:;"><img src="../img/banner-1.png" alt="" /></a>
						</li>
						<li>
							<a href="javascript:;"><img src="../img/banner-2.png" alt="" /></a>
						</li>
					</ul>
					<div class="banner-dot">
						<a class="banner-active" href="javascript:;"></a>
						<a href="javascript:;"></a>
						<a href="javascript:;"></a>
						<a href="javascript:;"></a>
					</div>
				</div>
			</div>
		</div>	
	</div>
</template>

<script>
	window.onload=function(){
		var num = 0;
		$('.banner-dot a').mouseover(function(){
			var _index = $(this).index();
			num = _index;
			$('.banner-dot a').removeClass('banner-active');
			$(this).addClass('banner-active');
			$('.banner-show li').removeClass('banner-op');
			$('.banner-show li').eq(_index).addClass('banner-op');
		});
		//自动轮播
    	function autoBanner(){
    		timer = setInterval(function(){
    			num++;
    			if(num==4)num=0;
    			$('.banner-dot a').removeClass('banner-active');
				$('.banner-dot a').eq(num).addClass('banner-active');
				$('.banner-show li').removeClass('banner-op');
				$('.banner-show li').eq(num).addClass('banner-op');
    		},2000)
    	};
    	autoBanner();
    	$('.banner-right').mouseover(function(){
    		clearInterval(timer);
    	}).mouseleave(function(){
    		autoBanner();
    	})
    	
		
	}
</script>

<style scoped>
	.banner-top{
		height:50px;
		width:1200px;
		background: #5cadff;
	}
	.banner-top li{
		float: left;
		width:210px;
		text-align: center;
		color:white;
		line-height:50px;
	}
	.banner-top li:nth-child(1){
		background: #FF6600;
	}
	.banner-content{
		width:1200px;
		height:430px;
		background: #e3edf6;
	}
	.banner-left{
		width:210px;
		height: 430px;
		position: relative;
		float: left;
	}
	
	.banner-nav>li{
		height:50px;
		line-height:50px;
		text-align: center;
		color:black;
		font-weight: bold;
		cursor: pointer;
	}
	.banner-nav>li i{
		float: right;
		margin-right:10px;
		line-height:48px;
		color:#FF6600;
	}
	.banner-nav>li:nth-child(2n-1){
		background: #dddfdf;
	}
	.banner-title{
		width:210px;
		height:50px;
		border:1px solid transparent;
		margin-left:1px;
		position: relative;
		z-index: 999;
	}
	.banner-title a{
		color:#4e4e4e;
	}
	.banner-detail{
		width:420px;
		height:430px;
		position: absolute;
		left:100%;
		top:0;
		border:1px solid #ff6600;
		background: white;
		display: none;
	}
	/*hover nav 效果*/
	.banner-nav>li:hover .banner-title{
		background: white;
		border-color:#ff6600;
		border-right-color:white;
		z-index: 99999;
	}
	.banner-nav>li:hover .banner-detail{
		display: block;
		z-index: 999;
	}
	.banner-right{
		float: left;
		position: relative;
	}
	.banner-right,.banner-show,.banner-show img{
		width:990px;
		height:430px;
	}
	.banner-show{
		position: relative;
	}
	.banner-show li{
		width:990px;
		height:430px;
		position: absolute;
		opacity: 0;
		left:0;
		top:0;
		transition:1s;
	}
	.banner-dot{
		width:100px;
		height:25px;
		position: absolute;
		left:20px;
		bottom:0;
		z-index: 20;
	}
	
	.banner-dot .banner-active{
		background:#ff6600;
	}
	.banner-show .banner-op{
		opacity: 1;
		z-index: 10;
	}
	.banner-dot a{
		width:15px;
		height:15px;
		border-radius: 50%;
		background: white;
		display: inline-block;
		margin:3px;
		z-index: 200;
		background: #5cadff;
	}
</style>